<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基础信息" name="second">基础信息</el-tab-pane>
    <el-tab-pane label="项目建模" name="first">
      <div class="side">
        <div class="header">
          <div class="aboutt" style="margin-right: 30px">
            <el-button plain @click="dialogFormVisible = true"
              >关联BOM</el-button
            >

            <el-dialog title="关联BOM" :visible.sync="dialogFormVisible">
              <div class="boder">
                <el-form :model="form">
                  <div style="margin-top: 30px; text-align: center">
                    <el-radio
                      v-model="radio2"
                      label="1"
                      border
                      size="medium"
                      style="margin-right: 200px"
                      >备选项1</el-radio
                    >
                    <el-radio v-model="radio2" label="2" border size="medium"
                      >备选项2</el-radio
                    >
                  </div>
                </el-form>
              </div>
              <div
                slot="footer"
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button
                  @click="dialogFormVisible = false"
                  style="margin-right: 70px"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </div>
          <div class="remves">
            <el-button plain @click="dialogFormVisible = true"
              >取消关联</el-button
            >

            <el-dialog title="关联BOM" :visible.sync="dialogFormVisible">
              <div class="boder">
                <el-form :model="form">
                  <div style="margin-top: 30px; text-align: center">
                    <el-radio
                      v-model="radio2"
                      label="1"
                      border
                      size="medium"
                      style="margin-right: 200px"
                      >备选项1</el-radio
                    >
                    <el-radio v-model="radio2" label="2" border size="medium"
                      >备选项2</el-radio
                    >
                  </div>
                </el-form>
              </div>
              <div
                slot="footer"
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button
                  @click="dialogFormVisible = false"
                  style="margin-right: 70px"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </div>
        </div>
        <div class="bottom">
          <span class="mytree">
            <el-tree :data="data"  @node-click="handleNodeClick"> </el-tree>
          </span>
        </div>
      </div>

      用户管理
    </el-tab-pane>

    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    <el-tab-pane label="BOM" name="fourth">
      <div class="side">
        <div class="header">
          <div class="aboutt" style="margin-right: 30px">
            <el-button plain @click="dialogFormVisible = true"
              >关联BOM</el-button
            >

            <el-dialog title="关联BOM" :visible.sync="dialogFormVisible">
              <div class="boder">
                <el-form :model="form">
                  <div style="margin-top: 30px; text-align: center">
                    <el-radio
                      v-model="radio2"
                      label="1"
                      border
                      size="medium"
                      style="margin-right: 200px"
                      >备选项1</el-radio
                    >
                    <el-radio v-model="radio2" label="2" border size="medium"
                      >备选项2</el-radio
                    >
                  </div>
                </el-form>
              </div>
              <div
                slot="footer"
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button
                  @click="dialogFormVisible = false"
                  style="margin-right: 70px"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </div>
          <div class="remves">
            <el-button plain @click="dialogFormVisible = true"
              >取消关联</el-button
            >

            <el-dialog title="关联BOM" :visible.sync="dialogFormVisible">
              <div class="boder">
                <el-form :model="form">
                  <div style="margin-top: 30px; text-align: center">
                    <el-radio
                      v-model="radio2"
                      label="1"
                      border
                      size="medium"
                      style="margin-right: 200px"
                      >备选项1</el-radio
                    >
                    <el-radio v-model="radio2" label="2" border size="medium"
                      >备选项2</el-radio
                    >
                  </div>
                </el-form>
              </div>
              <div
                slot="footer"
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button
                  @click="dialogFormVisible = false"
                  style="margin-right: 70px"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </div>
        </div>
        <div class="bottom"></div>
      </div>

      用户管理
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      // 菜单
      data: [{
          id: 1,
          label: '一级 1',
          children: [{id:2,label: '一级 1',icon:' el-icon-edit'},{id:3,label: '一级 1',},{id:3,label: '一级 1',}]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
      // 单选框
      radio1: "1",
      radio2: "1",

      // 按钮切换
      activeName: "second",
      // 弹框
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
// 菜单



// 侧面

.side {
  width: 25%;
  float: left;
  margin-left: 10px;
  height: 900px;
  border: 1px solid gray;
  .header {
    display: flex;
  }
}

.boder {
  margin-top: 10px;
  height: 100px;
  border-top: 1px solid black;
}
</style>
